<template>
  <gauge-charts :option="gauge" :resizable="resizable" @ready="onReady"></gauge-charts>
</template>

<script>
import GaugeCharts from 'vue-echarts-v3/src/lite.js'
export default {
  pros: ['setOption'],
  data () {
    return {
      resizable: true,
      gauge: {
        tooltip: {
          formatter: '{a} <br/>{b} : {c}%'
        },
        // toolbox: {
        //   feature: {
        //     restore: {},
        //     saveAsImage: {}
        //   }
        // },
        series: [
          {
            name: '业务指标',
            type: 'gauge',
            detail: {
              formatter: '{value}',
              fontSize: 16,
              fontFamily: 'PingFangSC-Regular',
              color: '#FFFFFF'
            },
            title: {
              offsetCenter: [0, '-20%'],
              fontSize: 16,
              fontFamily: 'PingFangSC-Regular',
              color: '#FFFFFF'
            },
            data: [
              {
                value: this.$attrs.setOption.value,
                name: this.$attrs.setOption.title
              }
            ],
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: [[1, this.$attrs.setOption.color]]
              }
            },
            pointer: {
              show: false
            },
            axisLabel: {
              show: false
            }
          }
        ]
      }
    }
  },
  components: {
    GaugeCharts
  },
  methods: {
    onReady (instance) {
      console.log(instance)
    }
  }
}
</script>

<style lang="less" scoped>

</style>
